<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总服务台</title>
    <style>
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>服务台</h2>
    <h3>目前已由功能如下：</h3>
    <div id='container'></div>

    <!-- 动态添加行内内容 -->
    <script>
        
        function getData() {
            var ajaxObj = new XMLHttpRequest()
            ajaxObj.open('get', 'http://localhost:2020/static/index.json')
            ajaxObj.send()
            ajaxObj.onreadystatechange = () => {
                if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                    insertData(JSON.parse(ajaxObj.responseText))
                }
            }
        }

        function insertData(data) {
            console.log(data)
            const $view = document.getElementById('container')
            var $innerText = ''
            data.forEach((obj, index) => {
                console.log(obj)
                $innerText += `<p>${index + 1}、${obj.name}：${obj.url} <a href=${obj.url} target="_blank">跳转到示例</a></p>`
            })
            $view.innerHTML = $innerText;
        }

        getData()
    </script>
</body>
</html>